<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .small_box{width: 350px;height: 350px;position: relative}
        .small_box img{width: 350px;height: 350px;}
        .small_box span{background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;}
        .small_box em{position: absolute;left:0;top:0;right:0;bottom: 0;z-index: 1;}

        .cont ul{margin: 0;padding: 0;list-style: none;display: flex;}
        .cont li{width: 50px;height: 50px;border: solid 4px #fff;}
        .cont li.active{border-color: #000;}
        .cont li img{width: 50px;height: 50px;}

        .big_box{width: 350px;height: 350px;overflow: hidden;display: none;position: absolute;left:400px;top: 100px;}
        .big_box img{width: 800px;height: 800px;position: absolute;}


    </style>
</head>
<body>
    <h1>头部</h1>
    <h2>导航</h2>
    <div class="cont">
        <div class="small_box">
            <img src="./imgs/m0.jpg" alt="">
            <span></span>
            <em></em>
        </div>
        <ul>
            <li><img src="./imgs/m0.jpg" alt=""></li>
            <li><img src="./imgs/s1.jpg" alt=""></li>
            <li><img src="./imgs/s2.jpg" alt=""></li>
        </ul>
    </div>
    <div class="big_box">
        <img src="./imgs/l0.jpg" alt="">
    </div>
</body>
<script>
    // 图片数据
    const imgs = [{
        s:"./imgs/m0.jpg",
        m:"./imgs/m0.jpg",
        l:"./imgs/l0.jpg",
    },{
        s:"./imgs/s1.jpg",
        m:"./imgs/m1.jpg",
        l:"./imgs/l1.jpg",
    },{
        s:"./imgs/s2.jpg",
        m:"./imgs/m2.jpg",
        l:"./imgs/l2.jpg",
    }];

    // 点击小图切换中图和大图
    function Tab(){
        this.li = document.querySelectorAll(".cont li");
        this.sImg = document.querySelector(".small_box img");
        this.bImg = document.querySelector(".big_box img");
        this.data = imgs;
        this.index = 0;
        this.addEvent();
    }
    Tab.prototype.addEvent = function(){
        const that = this;
        for(let i=0;i<this.li.length;i++){
            this.li[i].xuhao = i;
            this.li[i].onclick = function(){
                that.hide();
                that.getIndex(this);
            }
        }
    }
    Tab.prototype.hide = function(){
        this.li[this.index].className = "";
    }
    Tab.prototype.getIndex = function(now){
        this.index = now.xuhao;
        this.show();
    }
    Tab.prototype.show = function(){
        this.li[this.index].className = "active";
        this.sImg.src = this.data[this.index].m;
        this.bImg.src = this.data[this.index].l;
    }
    new Tab();






    // 放大镜功能
    class Magnifier{
        constructor(){
            this.sBox = document.querySelector(".small_box");
            this.sSpan = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");
            this.addEvent();
        }
        move(aaa){
            let l = aaa.x - this.sSpan.offsetWidth/2;
            let t = aaa.y - this.sSpan.offsetHeight/2;
            if(l < 0) l = 0;
            if(t < 0) t = 0;
            if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
            this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
        }
        init(){
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";7
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";

        }
        addEvent(){
            const that = this;
            this.sBox.onmouseenter = function(){
                that.show();
            }
            this.sBox.onmouseleave = function(){
                that.hide();
            }
            this.sBox.onmousemove = function(eve){
                const e = eve || window.event;
                const pos = {
                    x:e.offsetX,
                    y:e.offsetY
                };
                that.move(pos);
            }
        }
        show(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
            this.init();
        }
        hide(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }
    new Magnifier();
</script>
</html>